<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>JAVAscript练习</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" href="http://pengjianquan.pro.bluej.cn/resume/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="../../index.css"/>
		<style>
			ul {
				display: none;
			}
			
			li {
				transition: none;
			}
			
			li a {
				float: right;
			}
		</style>
		<script>
			window.onload = function() {
				var oDiv1 = document.getElementById('div1');
				var aDiv1 = oDiv1.getElementsByTagName('div');
				var aBtn1 = oDiv1.getElementsByTagName('button');
				var oUla1 = oDiv1.getElementsByTagName('ul');
				var oTxt1 = oDiv1.getElementsByTagName('input');
				aBtn1[0].onclick = function() {
					//需要用createElement凭空建一个变量
					var oLi1 = document.createElement('li'); //所谓create就是创建的意思 参数就是标签名
					//在父级上appendChild(子节点)
					oUla1[0].appendChild(oLi1); //指派父级
					oUla1[0].style.display = 'block'
					oLi1.className = 'list-group-item';
					oLi1.innerHTML = '这是创建的第' + oUla1[0].children.length + '个li';
					if(oUla1[0].children.length % 2 == 0) {
						oLi1.className = 'list-group-item list-group-item-info';
					}
				}
				aBtn1[1].onclick = function() {
					if(oTxt1[0].value == '') {
						alert('必须输入内容才能创建')
					} else {
						var Content = oTxt1[0].value;
						var oLi2 = document.createElement('li');
						oUla1[1].appendChild(oLi2);
						oUla1[1].style.display = 'block'
						oLi2.className = 'list-group-item';
						oLi2.innerHTML = Content + ' 这是第' + oUla1[1].children.length + '个li';;
						if(oUla1[1].children.length % 2 == 0) {
							oLi2.className = 'list-group-item list-group-item-info';
						}
						oTxt1[0].value = '';
					}
				}
				aBtn1[2].onclick = function() {
					var Content = oTxt1[1].value;
					if(Content == '') {
						alert('必须输入内容才能创建')
					} else {
						var oLi3 = document.createElement('li');
						oUla1[2].appendChild(oLi3);
						oUla1[2].style.display = 'block';
						oUla1[2].style.margin = '20px 0 0 0';
						oLi3.className = 'list-group-item';
						oLi3.innerHTML = Content + ' 这是第' + oUla1[2].children.length + '个li';
						oTxt1[1].value = '';
					}
				}
				var oDiv2 = document.getElementById('div2');
				var aDiv2 = oDiv2.getElementsByTagName('div');
				var oTxt2 = oDiv2.getElementsByTagName('input');
				var oUla2 = oDiv2.getElementsByTagName('ul');
				var aBtn2 = oDiv2.getElementsByTagName('button');
				aBtn2[0].onclick = function() {
					if(oTxt2[0].value == '') {
						alert('必须输入内容才能创建')
					} else {
						var oLi21 = document.createElement('li');
						var aLi21 = oUla2[0].getElementsByTagName('li');
						if(aLi21.length > 0) {
							oUla2[0].insertBefore(oLi21, aLi21[0]);
						} else {
							oUla2[0].appendChild(oLi21);
						}
						oUla2[0].style.display = 'block';
						oUla2[0].style.margin = '20px 0 0 0';
						oLi21.className = 'list-group-item';
						oLi21.innerHTML = oTxt2[0].value + ' 这是第' + oUla2[0].children.length + '个li';
						if(aLi21.length % 2 == 0) {
							oLi21.className = 'list-group-item list-group-item-info';
						}
						oTxt2[0].value = '';
					}
				}
				var oDiv3 = document.getElementById('div3');
				var oUla3 = oDiv3.getElementsByTagName('ul');
				var oBtn3 = oDiv3.getElementsByTagName('button');
				var oTxt3 = oDiv3.getElementsByTagName('input');
				oBtn3[0].onclick = function() {
					if(oTxt3[0].value == '') {
						alert('必须输入内容才能创建');
					} else {
						var oLi3 = document.createElement('li');
						var aLi3 = oUla3[0].getElementsByTagName('li');
						if(aLi3.length > 0) {
							oUla3[0].insertBefore(oLi3, aLi3[0]);
						} else {
							oUla3[0].appendChild(oLi3);
						}
						oUla3[0].style.display = 'block';
						oUla3[0].style.margin = '20px 0 0 0';
						oLi3.className = 'list-group-item';
						oLi3.innerHTML = oTxt3[0].value + ' 这是第' + oUla3[0].children.length + '个li' + '<a class="RemoveLi" href="javascript:;">删除</a>';
						oTxt3[0].value = '';
						if(aLi3.length > 0) {
							var LiRemove = oLi3.getElementsByTagName('a');
							for(var i = 0; i < LiRemove.length; i++) {
								if(LiRemove[i].className == 'RemoveLi') {
									LiRemove[i].onclick = function() {
										oUla3[0].removeChild(oLi3);
										if(aLi3.length == 0) {
											oUla3[0].style.display = 'none';
										}
									}
								}
							}
						}
						/*
									oLi3.children[0].onclick=function ()
									{
										oUla3[0].removeChild(this.parentNode);
									}
						*/
					}
				}
			}
		</script>
	</head>

	<BODY>
		<pre><h1>JAVAscript练习</a></h1></pre>
		<div id="div1" class="box box-re form-inline">
			1、创建元素 <code>createElement & appendChild</code><br><br>
			<div class="box box-re">
				例1：创建li<br><br>
				<ul class="list-group">
				</ul>
				<button class="btn btn-info">创建li</button>
			</div>
			<div class="box box-re">
				例2：创建自定义内容的li<br><br>
				<ul class="list-group">
				</ul>
				<input class="form-control" type="text" placeholder="可以自定义内容" />
				<button class="btn btn-info">创建li</button>
			</div>
			<div class="box box-re">
				例3：创建自定义内容的li<br><br>
				<input class="form-control" type="text" placeholder="可以自定义内容" />
				<button class="btn btn-info">创建li</button>
				<ul class="list-group">
				</ul>
			</div>
		</div>
		<div id="div2" class="box box-re form-inline">
			2、插入元素 <code>createElement & insertBefore</code><br><br>
			<div class="box box-re">
				<input class="form-control" type="text" placeholder="可以自定义内容" />
				<button class="btn btn-info">插入li</button>
				<ul class="list-group">
				</ul>
			</div>
		</div>
		<div id="div3" class="box box-re form-inline">
			3、删除元素 <code>removeChild</code><br><br>
			<div class="box box-re">
				<input class="form-control" type="text" placeholder="可以自定义内容" />
				<button class="btn btn-info">插入li</button>
				<ul class="list-group">
				</ul>
			</div>
		</div>

		<div id="Record" class="box box-re red">
			记录<br>
			<p><b>创建元素：</b><code>var 子节点=document.createElement('li')</code> 创建子节点变量 等于需要创建什么元素 那么参数就是什么。在创建完成之后系统并不知道把创建出的元素放到哪个父级下，所以需要指派：<code>父级.appendChild(子节点)</code> 这一步是把li作为子节点添加给父级的<strong>末尾</strong>。appendChild就是给元素添加父级的。</p>
			<p><b>插入元素：</b><code>父级.insertBefore(子节点,插入在谁之前（原有节点）)</code> 需要先判断ul中是否包含第0个li，如果包含才使用insertBefore，如果不包括则需要使用appendChild。 例如可以在li的第0个之前插入，那么刚插入的永远都是第0个，也就是在父级的<strong>开始</strong>插入的。</p>
			<p><b>删除元素：</b><code>oUla3[0].removeChild(this.parentNode)</code> 在父级下删除this的父级 也就是删除首父级的子级。</p>
		</div>

	</BODY>

</HTML>